<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'table.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<link rel="stylesheet"
	href="http://fonts.useso.com/css?family=Arimo:400,700,400italic">
<link rel="stylesheet" href="assets/css/fonts/linecons/css/linecons.css">
<link rel="stylesheet"
	href="assets/css/fonts/fontawesome/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/bootstrap.css">
<link rel="stylesheet" href="assets/css/xenon-core.css">
<link rel="stylesheet" href="assets/css/xenon-forms.css">
<link rel="stylesheet" href="assets/css/xenon-components.css">
<link rel="stylesheet" href="assets/css/xenon-skins.css">
<link rel="stylesheet" href="assets/css/custom.css">

<script src="assets/js/jquery-1.11.1.min.js"></script>

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
		<script src="assets/js/html5shiv.min.js"></script>
		<script src="assets/js/respond.min.js"></script>
	<![endif]-->
<!-- Bottom Scripts -->
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/TweenMax.min.js"></script>
<script src="assets/js/resizeable.js"></script>
<script src="assets/js/joinable.js"></script>
<script src="assets/js/xenon-api.js"></script>
<script src="assets/js/xenon-toggles.js"></script>
<script src="assets/js/datatables/js/jquery.dataTables.min.js"></script>
<!-- Imported scripts on this page -->
<script src="assets/js/datatables/dataTables.bootstrap.js"></script>
<script src="assets/js/datatables/yadcf/jquery.dataTables.yadcf.js"></script>
<script
	src="assets/js/datatables/tabletools/dataTables.tableTools.min.js"></script>
<!-- JavaScripts initializations and stuff -->
<script src="assets/js/xenon-custom.js"></script>
<script type="text/javascript" src="js/DataTableHelp.js"></script>
</head>

<body class="page-body">
	<div class="page-container">
		<!-- add class "sidebar-collapsed" to close sidebar by default, "chat-visible" to make chat appear always -->
		<div class="main-content">
			<!-- Table exporting -->
			<div class="panel panel-default">
				<div class="panel-heading">
					<h3 class="panel-title">Table exporting</h3>

					<div class="panel-options">
						<a href="#" data-toggle="panel"> <span class="collapse-icon">&ndash;</span>
							<span class="expand-icon">+</span>
						</a> <a href="#" data-toggle="remove"> &times; </a>
					</div>
				</div>
				<div class="panel-body">
					<table class="table table-bordered table-striped" id="example-4">
						<thead>
							<tr>
								<th>管理区域</th>
								<th>userCode</th>
								<th>userDetail</th>
								<th>userId</th>
								<th>userOrgCode</th>
								<th>userPwd</th>
							</tr>
						</thead>
					</table>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		jQuery(document)
				.ready(
						function($) {
							$('#example-4').dataTable({
								"bProcessing": true,
								"sAjaxSource": 'test/table',
								"columns": [
								{ data: 'userClass' },
								{ data: 'userCode' },
								{ data: 'userDetail' },
								{ data: 'userId' },
								{ data: 'userOrgCode' },
								{ data: 'userPwd' }
								]
								});
// 								var option={"sAjaxSource":"test/table",prams:{"userId":1},
// 											columns: [
// 											{ data: 'userClass' },
// 											{ data: 'userCode' },
// 											{ data: 'userDetail' },
// 											{ data: 'userId' },
// 											{ data: 'userOrgCode' },
// 											{ data: 'userPwd' }
// 											]};		
// 								DataTableHelp.BPage('example-4',option);
// 								.yadcf([ {
// 										column_number : 0,
// 										data : [ "Trident", "No" ],
// 										filter_default_label : "Select Yes/No"
// 									}, {
// 										column_number : 1,
// 										filter_type : 'text'
// 									}, {
// 										column_number : 2,
// 										filter_type : 'text'
// 									}, {
// 										column_number : 3,
// 										filter_type : 'range_number'
// 									}, {
// 										column_number : 4
// 									}, {
// 										column_number : 5
// 									} ]);
						});
	</script>
</body>
</html>
